<template>
    <div class = "clazz-add-main">
        <el-dialog
            title="提示"
            :visible.sync="dialog"
            width="65%"
            :before-close="handleClose">
            
            <el-form ref="form" :model="form" label-width="80px">
                <el-card shadow="never">
                    <div slot="header" class="clearfix">
                        <span>班级信息</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item>
                                <el-input v-model="form.className" placeholder="请输入班级名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <el-input v-model="form.desc" placeholder="请输入班级描述"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                 <el-select v-model="form.value" placeholder="请选择"
                                 label="类型">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.type"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    
                    <el-row gutter="20">
                        <el-col :span="8">
                            <el-form-item>
                                <el-date-picker
                                    value-format="yyyy-MM-dd"
                                    v-model="form.startTime"
                                    type="datetime"
                                    placeholder="选择开班日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item>
                                <el-date-picker
                                    value-format="yyyy-MM-dd"
                                    v-model="form.endTime"
                                    type="datetime"
                                    placeholder="选择结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-card>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="saveClass">确 定</el-button>
            </span>
</el-dialog>
    </div>
</template>
<script>
import {classAdd,classDetail,classUpdate} from "@/api/xs/clazz"
export default {
    props: ["class-list"],
    data(){
        return{
            // classList:[],
            dialog:false,
            value:'',
            form:{
                className:"",
                desc:'',
                startTime:'',
                endTime:'',
                // id:'',
                // type:'',
                value:'',
            },
            options: [
                {
                    value: "0",
                    type: "UI"
                }, 
                {
                    value: "1",
                    type: "前端"
                }, 
            ],
            value:'',
            id:'',
        }
    },
    methods:{
        openDialog(id){
            this.dialog = true;
            if(id){
                classDetail({id}).then(res=>{
                    console.log(res);
                    this.form = res.data;
                })
            }
        },
        handleClose() {
            this.$confirm('确认关闭？')
            .then(_ => {
                this.dialog = false;
            })
            .catch(_ => {});
        },
        saveClass(){

            var params={
                    xyClassInfo:{
                        className:this.form.className,
                        startTime:this.form.startTime,
                        endTime:this.form.endTime,
                        desc:this.form.desc,
                        type:this.form.value,
                        id:this.form.id
                    },
                }
            if(this.form.id){   
             classUpdate(params).then(res=>{
                    console.log(res);
                    this.dialog = false;
                    this.$message("编辑成功！")
                    this.$emit("classlist");
                    this.form = "";
                    return
                })
               
            }else{
                 var paramss={
                    xyClassInfo:{
                            className:this.form.className,
                            startTime:this.form.startTime,
                            endTime:this.form.endTime,
                            desc:this.form.desc,
                            type:this.form.value,
                        },
                    }
                    console.log(this.form.value);
                    classAdd(paramss).then(res=>{
                    console.log(res);
                    this.dialog = false;
                    this.$message("新增成功！")
                    this.$emit("classlist");
                })

            }
         
         
        }
    },
    created(){
        
    },
}
</script>

<style lang="scss" scoped>

</style>